<template>
    <div>
      
<table>
    <tr>
        <td>名称</td>
        <td>
            <input type="text" v-model="state.mname">
        </td>
    </tr>
    <tr>
        <td>状态</td>
        <td> <input type="text" v-model="state.mstate"></td>
    </tr>
    <tr>
        <td>数量</td>
        <td> <input type="text" v-model="state.mnum"></td>
    </tr>
    <tr>
        <td>单价</td>
        <td> <input type="text" v-model="state.mprice"></td>
    </tr>
    <tr>
        <td>图片</td>
        <td>
            <input type="file" @change="shang">
            <img :src="state.mimage" alt="" width="50px" height="50px" v-if="src!=''" >
        </td>
    </tr>
    <tr>
        <td>时间</td>
        <td><input type="date" v-model="state.date"></td>
    </tr>
    <tr>
        <td>
            <input type="button" value="添加" @click="add">
        </td>
        <td></td>
    </tr>
</table>
    </div>
</template>

<script setup lang="ts">
import {reactive,onMounted,toRefs} from 'vue';
import{useRoute,useRouter} from 'vue-router';
import axios from 'axios';
const route = useRoute();
const router = useRouter();
const data = reactive({
    state:{
      mname:'',
      mstate:'',
      mnum:'',
      mprice:'',
      mimage:'',
      date:''
    },
    src:''
})

const {state,src} = toRefs(data);

const shang = (e:any)=>{
    let file = e.target.files[0];
    let from = new FormData();
   from.append('file',file);
   axios({
    url:'https://localhost:7194/api/image/shangchuan',
    method:'post',
    data:from

   }).then((res)=>{
       console.log(res);
       src.value = res.data.data;
       state.value.mimage = res.data.data;
   })
}

const add = ()=>{
    axios({
        url:'https://localhost:7194/api/Member/addMember',
        method:'post',
        data:state.value
    }).then((res)=>{
        console.log(res);
      if(res.data.data>0){
          alert('添加成功');
      }else{
          alert('添加失败');
      }
    })
}




</script>

<style scoped>

</style>